<template>
	<view class="wrap_containers" :style="'background:'+bgs" :class="isSticky == true?'isSticky':''">
		<view :style="'height:'+navHeight+'px'"></view>
		<view class="default">
			<view class="backs" @tap="backto" v-if="indexs">
				<u-icon name="arrow-left" size="20px" :color="colors?colors:'color:#fff'"></u-icon>
			</view>
			<view class="backs" v-else></view>
			<view class="content" :style="colors">{{title?title:'汇组织'}}</view>
			<view class="right">
				<slot></slot>
			</view>
		</view>
		<image class="bg1" :src="bg1" mode="" v-if="!isNoBg"></image>
		<image class="bg2" :src="bg2" mode="" v-if="!isNoBg"></image>
	</view>
</template>

<script>
	export default {
		props: ['title', 'bgs', 'colors', 'isSticky', 'type', 'backType', "shouye", "isNoBg"], //isSticky：是否吸顶，颜色默认为透明
		data() {
			return {
				navHeight: this.$stemInfo.statusBarHeight,
				bg1: require('@/static/images/rank1.png'),
				indexs: false,
				bg2: require('@/static/images/rank3.png'),
			}
		},
		methods: {
			backto() {
				console.log('点击了返回按钮');
				if (this.backType == 'share') {
					this.$gourl('/pages/user/user', 2)
				} else {
					// this.$backTo(1)
					let that = this
					uni.navigateBack({
						delta: 1,
						success() {
							console.log('成功')
						},
						fail() {
							console.log('失败')
							that.$gourl('/pages/index/index', 2)
						}
					});
				}
			},
			watchRouter() {}
		},
		created() {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route // 获取当前页面路由，也就是最后一个打开的页面路由
			if (curRoute.indexOf('pages/index') !== -1) {
				this.indexs = false
			} else {
				this.indexs = true
			}
		}
	}
</script>

<style scoped lang="scss">
	.isSticky {

		// z-index: 9;
	}

	.wrap_containers {
		position: fixed !important;
		z-index: 9999;
		top: 0;
		left: 0;
		width: 100vw;
		background: linear-gradient(to right, #293FFC, #1C91FB);
		position: relative;
		overflow: hidden;

		.default {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 40px;
		}

		.bg1 {
			height: calc(344rpx + var(--status-bar-height));
			width: calc(344rpx + var(--status-bar-height));
			position: absolute;
			left: -160rpx;
			bottom: -316rpx;
			opacity: .1;
		}

		.bg2 {
			position: absolute;
			opacity: .1;
			bottom: -80rpx;
			right: -70rpx;
			width: 310rpx;
			height: 310rpx;
		}

		.backs {
			width: 88rpx;
			height: 40px;
			display: flex;
			color: #fff;
			position: relative;
			z-index: 9999;
			align-items: center;
			justify-content: center;
		}

		.content {
			font-size: 16px;
			// font-weight: bold;
			max-width: 360rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #fff;
		}

		.right {
			min-width: 88rpx;
			min-height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			padding-right: 30rpx;
		}
	}
</style>
